<template>
  <el-form
    :label-position="labelPosition"
    label-width="80px"
    :model="form.companyInfo"
    :rules="rulesCompanyInfo"
    ref="ruleForm"
  >
    <el-form-item label="公司名称" prop="companyName">
      <el-input
        class="iptone"
        v-model="form.companyInfo.companyName"
      ></el-input>
    </el-form-item>
    <el-form-item label="公司电话" prop="companyPhone">
      <el-input v-model="form.companyInfo.companyPhone"></el-input>
    </el-form-item>
    <el-form-item label="公司传真" prop="companyFax">
      <el-input v-model="form.companyInfo.companyFax"></el-input>
    </el-form-item>
    <el-form-item label="法人代表" prop="corporateRepresentative">
      <el-input v-model="form.companyInfo.corporateRepresentative"></el-input>
    </el-form-item>
    <el-form-item label="公司地址">
      <el-input v-model="form.companyInfo.companyAddress"></el-input>
    </el-form-item>
    <el-form-item label="公司邮箱" prop="companyEmail">
      <el-input v-model="form.companyInfo.companyEmail"></el-input>
    </el-form-item>
    <el-form-item label="公司网站">
      <el-input v-model="form.companyInfo.companyWebsite"></el-input>
    </el-form-item>
    <el-form-item label="法人身份" prop="identityCard">
      <el-input v-model="form.companyInfo.identityCard"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: {
    form: {
      type: Object,
      default: {},
    },
  },
  data() {
    var regFax = (rule, value, callback) => {
      const reg =
        /(^(\d{2,4}[-_－—]?)?\d{3,8}([-_－—]?\d{3,8})?([-_－—]?\d{1,7})?$)|(^0?1[35]\d{9}$)/;
      if (reg.test(value)) {
        callback();
      } else {
        callback(new Error("传真号码不正确"));
      }
    };
    var regIdentityCard = (rule, value, callback) => {
      const reg =
        /(^[1-9]\\d{5}(18|19|20)\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$)| (^[1-9]\\d{5}\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}$)/;
      if (reg.test(value) || value === "") {
        callback();
      } else {
        callback(new Error("请输入有效的身份证号码"));
      }
    };
    var regPhone = (rule, value, callback) => {
      const HK_PATTERN = /^(5|6|8|9)\d{7}$/;
      const CHINA_PATTERN =
        /^((13[0-9])|(14[0,1,4-9])|(15[0-3,5-9])|(16[2,5,6,7])|(17[0-8])|(18[0-9])|(19[0-3,5-9]))\d{8}$/;
      if (HK_PATTERN.test(value) || CHINA_PATTERN.test(value)) {
        callback();
      } else {
        callback(new Error("错误手机号码（内陆、香港）"));
      }
    };
    var regEmail = (rule, value, callback) => {
      const EMAIL_ENGLISH_PATTERN =
        /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/;
      const EMAIL_CHINESE_PATTERN =
        /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (
        EMAIL_ENGLISH_PATTERN.test(value) ||
        EMAIL_CHINESE_PATTERN.test(value) ||
        value === ""
      ) {
        callback();
      } else {
        callback(new Error("邮箱格式不正确"));
      }
    };
    return {
      labelPosition: "left",
      rulesCompanyInfo: {
        companyName: [
          { required: true, message: "请输入公司名称", trigger: "blur" },
        ],
        companyPhone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { validator: regPhone, trigger: "blur" },
        ],
        companyFax: [
          { required: true, message: "请输入传真号码", trigger: "blur" },
          { validator: regFax, trigger: "blur" },
        ],
        companyEmail: [{ validator: regEmail, trigger: "blur" }],
        corporateRepresentative: [
          { required: true, message: "请输入法人姓名", trigger: "blur" },
        ],
        identityCard: [{ validator: regIdentityCard, trigger: "blur" }],
      },
    };
  },
  methods: {
      //子组件校验，传递到父组件
    validateForm() {
      let flag = null;
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          flag = true;
        } else {
          flag = false;
        }
      });
      return flag;
    },
  }
};
</script>

<style scoped>
.el-input /deep/ .el-input__inner {
  background-color: rgba(255, 255, 255, 0.247);
}

</style>